<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>
    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form id="myForm" method="post" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">角色名称</td>
            <td><input type="text" name="r_name" id="r_name"/><span id="name_res" style="color: red;margin-left: 10px"></span></td>
        </tr>
        <tr>
            <<td class="tableleft">状态</td>
            <td>
                <input type="radio" name="r_state" checked value="0"/> 启用
                <input type="radio" name="r_state" value="1"/> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">权限</td>
            <td id="menuList">
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button id="insert" class="btn btn-primary" type="button">保存</button> &nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }
    // 判断角色名是否重复
    function isExistOfName(){
        let val = $("#r_name").val();
        if (val=='') {
            alert("请填写角色名称");
        } else {
            $.getJSON("/role/isExistName/" +val ,null,function (data) {
                if (data.result=="success"){
                    $("#name_res").html(data.msg);
                } else{
                    $("#name_res").html("");
                }
            })
        }
    }
    $(function () {
        // 先渲染所有的menu资源
        $.getJSON("/menu/getAll",null,function (data) {
            if (data.msg=='success'){
                $("#menuList").empty();
                // 渲染数据
                let list = data.data;
                console.log(data.data)
                for (let i = 0; i < list.length; i++) {
                    let items = `<ul><label class='checkbox inline'><input type='checkbox' name='menu' value='`+list[i].m_id+`' />`+list[i].m_name+`</label></ul>`
                    $("#menuList").append($(items))
                }
            }
        })
        // r_name 的blur事件
        $("#r_name").blur(function () {
            isExistOfName()
        })
        // 添加事件
        $("#insert").click(function () {
            // 先验证
            let val = $("#r_name").val();
            if (val=='') {
                alert("请填写角色名称后，再添加");
            } else {
                $.getJSON("/role/isExistName/" +val ,null,function (data) {
                    if (data.result=="success"){
                        // 资源名相同
                        $("#name_res").html(data.msg);
                    } else{
                        // 资源名验证通过
                        // 发送ajax请求添加
                        $.post("/role",$("#myForm").serialize(),function (data) {
                            if (data.code == 200) {
                                // 服务器接收到了请求
                                if (data.result == 'success') {
                                    alert("添加成功");
                                    location.href = 'index.html';
                                } else {
                                    alert("添加失败");
                                }
                            } else {
                                alert("服务器出错！请稍后重试");
                            }
                        })
                    }
                })
            }
        })
        // 返回按钮
		$('#backid').click(function(){
				window.location.href="index.html";
		 });
    });
</script>